<template>
    <div>
        <img
            class="avstar"
            src="../../assets//images/uestc.png"
            alt="资源丢失"
        />
        <div style="background: #eee; padding: 20px">
            <Card>
                <p slot="title">
                    姓名：{{
                        info["truename"]
                    }}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：{{
                        info["gender"]
                    }}
                </p>
                <p class="info-item">用户名：{{ info["username"] }}</p>
                <p class="info-item">学校：{{ info["school"] }}</p>
                <p class="info-item">出生日期：{{ info["birthday"] }}</p>
                <p class="info-item">居住地址{{ info["address"] }}</p>
                <p class="info-item">座右铭：{{ info["motto"] }}</p>
                <p class="info-item">
                    累计总实验次数：{{ info["experimentTimes"] }}&nbsp;&nbsp;次
                </p>
            </Card>
        </div>
        <!-- {{ info }} -->
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "Info",
    data() {
        return {};
    },
    methods: {},
    components: {},
    mounted() {
        this.$store.dispatch("getInfoAboutMe", this.$router);
    },
    computed: {
        ...mapState(["info"]),
    },
};
</script>

<style scoped>
div {
    color: black;
}
.avstar {
    width: 150px;
    border-radius: 50%;
}
div .info-item {
    margin-top: 20px;
    /* border-top: 2px solid #464c5b; */
    /* width:50% */
}
div .info-item:first-child {
    margin-top: 0;
    /* border-top: 0 solid #464c5b; */
}
</style>
